var app = new Vue({
    el: '#app',
    data: {
        mazeData: [],
        selectedType: 1,
    },

    mounted() {
        if (localStorage.getItem("my-maze-data") != undefined) {
            let data = JSON.parse(localStorage.getItem("my-maze-data"));
            this.load(data.data)
        } else {
            this.mazeData = [
                [1, 1, 2, 1, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 4, 4, 4],
                [1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 4, 4, 4],
                [1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 4, 4, 4],
                [1, 3, 4, 1, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
            ]
        }
    },
    methods: {
        load(data) {
            console.log('load data');
            this.mazeData = data;
        },
        changeTile(e, row, col) {
            // console.log('e', e);
            // console.log('e.buttons', e.buttons);
            // console.log('row', row);
            // console.log('col', col);
            if (e.buttons === 1 || e.type == "click") {//鼠标左键
                    // console.log('before', this.mazeData);
                    let temp = this.mazeData[row];
                    temp[col] = this.selectedType;
                    this.$set(this.mazeData, row, temp);
                    // console.log('fater', this.mazeData);
            }
        },
        save() {
            const res = this.verify();
            console.log('save res',res);
            if (res.status === true) {//验证通过后才能保存
                this.showMessage(res.msg);
                const dataToSave = this.mazeData;
                let data = {
                    "data": dataToSave,
                    "height": dataToSave.length,
                    "width": dataToSave[0].length,
                    "startNumber":startNumber,
                    "endNumber":endNumber
                }
                localStorage.setItem("my-maze-data", JSON.stringify(data));
            } else {
                this.showMessage(res.msg);
            }

        },
        gotoMaze() {
            location.href = "maze-index.html"
        },
        verify() {
            const dataToSave = this.mazeData;
            const temp = dataToSave.flat();//大屏数组，便于查找
            console.log('dataToSave',dataToSave);
            console.log('temp',temp);
            const res = {
                status: true,
                msg: "保存成功"
            }
            const endArray=temp.filter(function(value){
                return value===mapTable[3].type;
            })
            if(endArray.length===0){
                res.status = false;
                res.msg = "不包含终点，不能保存";
                return res;
            }
            endNumber=endArray.length;
            console.log('eggNumber',endNumber);
            const startArray = temp.filter(function(value){
                return value===mapTable[2].type;
            });
            if (startArray.length != 1) {//如果起点数目不为1，则不能保存
                res.status = false;
                res.msg = "起点数目不为1，则不能保存。";
                return res;
            }
            startNumber=startArray.length;
            return res;
        },
        showMessage(message = "这是一条消息") {
            alert(message);
        }
    }
})